// src/components/MappingParams.tsx
import React, { useState, useEffect } from "react";
import type { CameraParams } from "./utils";

import { C_FACTOR } from "./utils";

interface MappingParamsProps {
  onParamsChange: (params: {
    altitude: number;
    gsd: number;
    frontalOverlap: number;
    sideOverlap: number;
    speed: number;
    angle: number;
    autoAngleEnabled: boolean; // 新增自动计算角度
  }) => void;
  cameraParams: CameraParams;
  // 新增：用于显示自动计算的角度，只读
  calculatedAutoAngle: number | null;
}

const MappingParams: React.FC<MappingParamsProps> = ({
  onParamsChange,
  cameraParams,
  calculatedAutoAngle, // 解构新 prop：自动计算角度
}) => {
  const [altitude, setAltitude] = useState(100);
  const [gsd, setGsd] = useState(0); // 初始为0，会根据航高计算
  const [frontalOverlap, setFrontalOverlap] = useState(80);
  const [sideOverlap, setSideOverlap] = useState(70);
  const [speed, setSpeed] = useState(10);
  const [angle, setAngle] = useState(0);
  const [autoAngleEnabled, setAutoAngleEnabled] = useState(false); // 新增自动计算角度状态

  // 计算 GSD 的 C_FACTOR，确保使用传入的 cameraParams
  const currentCFactor =
    (100 * cameraParams.SENSOR_WIDTH) /
    (cameraParams.IMAGE_WIDTH_PIXELS * cameraParams.FOCAL_LENGTH);

  // 初始化时根据默认航高计算GSD
  useEffect(() => {
    if (altitude > 0) {
      const calculatedGsd = currentCFactor * altitude;
      setGsd(parseFloat(calculatedGsd.toFixed(2)));
    }
  }, [altitude, currentCFactor]); // 依赖 altitude 和 currentCFactor

  // 每次参数变化时通知父组件
  useEffect(() => {
    onParamsChange({
      altitude,
      gsd,
      frontalOverlap,
      sideOverlap,
      speed,
      angle:
        autoAngleEnabled && calculatedAutoAngle !== null
          ? calculatedAutoAngle
          : angle, // 根据 autoAngleEnabled 决定使用哪个角度
      autoAngleEnabled, // 传递新状态：自动计算角度
    });
  }, [
    altitude,
    gsd,
    frontalOverlap,
    sideOverlap,
    speed,
    angle,
    autoAngleEnabled, // 添加自动计算角度依赖
    calculatedAutoAngle, // 添加自动计算角度依赖
    onParamsChange,
  ]);

  const handleAltitudeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newAltitude = parseFloat(e.target.value);
    if (!isNaN(newAltitude) && newAltitude > 0) {
      setAltitude(newAltitude);
      const calculatedGsd = currentCFactor * newAltitude;
      setGsd(parseFloat(calculatedGsd.toFixed(2)));
    }
  };

  const handleGsdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newGsd = parseFloat(e.target.value);
    if (!isNaN(newGsd) && newGsd > 0) {
      setGsd(newGsd);
      const calculatedAltitude = newGsd / currentCFactor;
      setAltitude(Math.round(calculatedAltitude));
    }
  };

  return (
    <div className="mission-params">
      <h4 className="text-[#007bff] mt-5 mb-2 pb-1 border-b border-dashed border-[#4a4a4a] text-base font-semibold">
        建图航拍参数
      </h4>
      <div className="param-group mb-4">
        <label
          htmlFor="mapping-altitude"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          航高 (m):
        </label>
        <input
          type="number"
          id="mapping-altitude"
          value={altitude}
          onChange={handleAltitudeChange}
          min="10"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="mapping-gsd"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          GSD (cm/pixel):
        </label>
        <input
          type="number"
          id="mapping-gsd"
          value={gsd}
          onChange={handleGsdChange}
          min="0.1"
          step="0.01"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
        <small className="block mt-1 text-xs text-[#808080]">
          （输入GSD或航高，另一个将自动计算）
        </small>
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="mapping-frontal-overlap"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          航向重叠 (%):
        </label>
        <input
          type="number"
          id="mapping-frontal-overlap"
          value={frontalOverlap}
          onChange={(e) => setFrontalOverlap(parseFloat(e.target.value))}
          min="50"
          max="95"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="mapping-side-overlap"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          旁向重叠 (%):
        </label>
        <input
          type="number"
          id="mapping-side-overlap"
          value={sideOverlap}
          onChange={(e) => setSideOverlap(parseFloat(e.target.value))}
          min="50"
          max="95"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="mapping-speed"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          飞行速度 (m/s):
        </label>
        <input
          type="number"
          id="mapping-speed"
          value={speed}
          onChange={(e) => setSpeed(parseFloat(e.target.value))}
          min="1"
          max="15"
          step="0.1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
        />
      </div>
      <div className="param-group mb-4">
        <label
          htmlFor="mapping-angle"
          className="block mb-1 text-sm text-[#c0c0c0]"
        >
          航线角度 (度):
        </label>
        <input
          type="number"
          id="mapping-angle"
          value={
            autoAngleEnabled && calculatedAutoAngle !== null
              ? calculatedAutoAngle.toFixed(0)
              : angle
          } // 显示自动计算或手动输入
          onChange={(e) => setAngle(parseFloat(e.target.value))}
          min="0"
          max="180"
          step="1"
          className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm focus:outline-none focus:border-[#007bff] focus:ring-2 focus:ring-blue-500/25"
          disabled={autoAngleEnabled} // 启用自动角度时禁用手动输入
        />
        <small className="block mt-1 text-xs text-[#808080]">
          （0度为正北方向，顺时针旋转）
        </small>
        <div className="flex items-center mt-2">
          <input
            type="checkbox"
            id="auto-angle-checkbox"
            checked={autoAngleEnabled}
            onChange={(e) => setAutoAngleEnabled(e.target.checked)}
            className="mr-2 h-4 w-4 text-[#007bff] rounded focus:ring-[#007bff] bg-[#3a3a3a] border-[#4a4a4a]"
          />
          <label
            htmlFor="auto-angle-checkbox"
            className="text-sm text-[#c0c0c0]"
          >
            自动计算航线角度 (沿最长边)
          </label>
        </div>
      </div>
    </div>
  );
};

export default MappingParams;
